<template>
	<view class="search">
		<view class="head">
			<image class="bg" :src="$buildFullImageUrl('/static/consult/head-bg.png')"></image>
			<view>
				<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="搜索你感兴趣的测评"></uni-easyinput>
				<view class="btn" @click="handelSearch">搜索</view>
			</view>
		</view>
		<view class="con-wrap">
			<view class="scrollWrap">
				<z-paging :fixed="false" :auto="false" ref="paging" v-model="evaluateList" @query="queryList">
					<template #empty>
						<emptyView></emptyView>
					</template>
				<view class="box-container" v-if="total > 0">
					<view class="top">
						<text>搜索结果</text>
						<text>共{{total}}条</text>
					</view>
					<view class="mid" v-for="(item, index) in evaluateList" :key="index">
						<image :src="$fullImageUrl(item.coverImage)"></image>
						<view class="mid-con">
							<view>{{ item.appraisalName }}</view>
							<view>
								<text>{{ item.appraisalPeopleFalse }}测过</text>
								<text>｜</text>
								<text>{{ item.appraisalNumber }}题</text>
							</view>
						</view>
						<view class="right-con">
							<view @click="itemClickDetail(item)">查看详情</view>
						</view>
					</view>
				</view>
				</z-paging>
			</view>
		</view>
	</view>
</template>

<script>
	import { getAppraisalList } from '@/api/evaluate/index.js';
	export default {
		data() {
			return {
				searchValue: '',
				evaluateList:[],
				total:0
			}
		},
		watch:{
			searchValue() {
				if (String(this.searchValue).trim().length === 0) {
					this.evaluateList = [];
					this.total = 0;
				}
			},
		},
		methods: {
			queryList(pageNum, pageSize) {
				const querys = {
					pageNum,
					pageSize,
					appraisalName: this.searchValue
				};
				getAppraisalList(querys).then((res) => {
					let list = [...res.rows];
					this.total = res.total;
					this.$refs.paging.completeByTotal(list, res.total);
				});
			},
			handelSearch(){
				this.$refs.paging.reload();
				// getAppraisalList({
				// 	appraisalName: this.searchValue
				// }).then((res) => {
				// 	this.evaluateList = res.rows;
				// 	this.total = res.total;
				// });
			},
			itemClickDetail(item) {
				//获取点击的列表项
				this.$tab.navigateTo(`/subset/pages/evaluate/evaluateDetail?id=${item.id}`);
			},
		},
		
	}
</script>

<style scoped lang="scss">
	.search {
		width: 100%;
		height: 100%;
		background: #f7f6f9;

		.head {
			width: 100%;
			height: 100rpx;
			position: relative;

			.bg {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}

			>view:last-child {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 30rpx;
				box-sizing: border-box;

				.btn {
					width: 100rpx;
					text-align: center;
					color: #6d6d6d;
				}

				::v-deep .uni-easyinput {
					width: 584rpx !important;
					height: 64rpx;
				}

				::v-deep .uni-easyinput__content {
					width: 584rpx !important;
					height: 64rpx;
				}

				::v-deep .uni-easyinput__content-input {
					padding-left: 20rpx;

				}

				::v-deep .is-input-border {
					border-radius: 34rpx;
				}

				::v-deep .uniui-search {
					font-size: 34rpx !important;
				}
			}
		}

		.con-wrap {
			width: 100%;
			height: calc(100% - 100rpx);
			background-color: #fff;

			.scrollWrap {
				width: 100%;
				height: 100%;
			}

			.box-container {
				width: 100%;
				padding: 0 20rpx;
				box-sizing: border-box;
				.top {
					width: 100%;
					height: 90rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					>text{
						color:  #a5a5a5;
						font-weight: 500;
						font-size: 30rpx;
					}
				}

				.mid {
					width: 100%;
					height: 160rpx;
					display: flex;
					margin-bottom: 30rpx;
					justify-content: space-between;

					image {
						width: 160rpx;
						height: 160rpx;
						border-radius: 10rpx;
					}

					.mid-con {
						width: calc(100% - 360rpx);
						height: 100%;
						display: flex;
						flex-wrap: wrap;
						align-content: center;

						>view:nth-child(1) {
							width: 100%;
							font-size: 26rpx;
							font-weight: 500;
							color: #000;
							margin-bottom: 20rpx;
						}

						>view:last-child {
							width: 100%;
							display: flex;

							>text {
								color: #a5a5a5;
								font-size: 20rpx;
							}
							>text:nth-child(2){
								margin: 0 10rpx;
							}
						}
					}
					.right-con{
						width: 100rpx;
						height: 100%;
						display: flex;
						align-items: center;
						>view{
							width: 170rpx;
							height: 50rpx;
							line-height: 50rpx;
							text-align: center;
							color: #0f80ff;
							font-size: 20rpx;
							border: 2rpx solid #0f80ff;
							border-radius: 45rpx;
						}
						
					}
				}
			}
		}
	}
</style>